@each $val in primary, info, success, warning, danger, r {
  .lk-alert--$(val) {
    --lk-alert-title-color: var(--lk-color-$(val));
    --lk-alert-description-color: var(--lk-color-$(val));
    --lk-alert-bg-color: var(--lk-color-$(val)-light-9);
    --lk-alert-icon-color: var(--lk-color-$(val));
  }
}

.lk-alert {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding: 8px 16px;
  background-color: var(--lk-alert-bg-color);
  --lk-alert-text-color-placeholder: var(--lk-text-color-placeholder);
  .lk-alert__icon {
    margin-right: 12px;
    color: var(--lk-alert-title-color);
  }
  .lk-alert__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--lk-alert-title-color);
  }
  .lk-alert__close-icon {
    position: absolute;
    top: 12px;
    right: 16px;
    cursor: pointer;
    span {
      color: var(--lk-alert-text-color-placeholder);
    }
  }
}

.fade-enter-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--lk-transition-duration);
}

.fade-leave-to {
  opacity: 0;
}
